<template>
  <div v-if="serviceVersionVO[modelType]" class="input-model-container">
    <div style="font-size: 1.2em;font-weight: bold; margin-bottom: 10px">
      <slot name="title">{{ title }}</slot>
    </div>
    <el-descriptions :column="2" border label-width="80">
      <el-descriptions-item label="ID">{{ serviceVersionVO[modelType].id }}
      </el-descriptions-item>
      <el-descriptions-item label="名称">{{ serviceVersionVO[modelType].name }}
      </el-descriptions-item>
      <!--      <el-descriptions-item label="描述" :span="2">
              &lt;!&ndash;                    <pre style="height:200px;overflow: auto">{{ currentFormServiceVersionVO.inputModel.schema }}</pre>&ndash;&gt;
              <pre style="height:200px;overflow: auto">{{ serviceVersionVO.inputModelTree }}</pre>
            </el-descriptions-item>-->
      <el-descriptions-item label="结构" :span="2">
        <el-tree :data="serviceVersionVO[`${modelType}Tree`]" default-expand-all>
          <template #default="{ node, data }">
            <div class="tree-item">
              <div style="flex: 1">
                <span style="margin-right: 20px">{{ data.label }}</span>
                <el-tag type="warning" v-for="tag in data.tags">{{ tag }}</el-tag>
              </div>
              <component-select style="flex:3" v-if="node.isLeaf && modelFrom=='form'" :node-data="data"
                                :modelType="modelType" />
            </div>
          </template>
        </el-tree>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <div v-else>暂无模型数据</div>
</template>
<script setup lang="ts">
import ComponentSelect
  from '@/components/form-designer/setting-panel/data-source-setting/subscription-service/components/content/components/component-select.vue'
import { type ServiceVersionVOType } from '@coolphk/shared-types/low-code'
import { ModelType } from '@/types/setting'

defineOptions({
  name: 'ModelCard',
})
type Props = {
  serviceVersionVO: ServiceVersionVOType
  title?: string
  modelType: ModelType
  modelFrom: 'form' | 'latest'
}
const props = defineProps<Props>()
// console.log(props.serviceVersionVO, props.modelType)
</script>

<style scoped lang="scss">
.tree-item {
  //margin: 10px 0 10px 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
